<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../utils/vue.js"></script>
</head>
<body>
    <div id="app">
        <navigation-link url="https://www.baidu.com">
            百度一下
        </navigation-link>
        <br/>

        <!-- 当组件渲染时，slot元素会被替换成百度一下，插槽内可包含任何模板代码，包括HTML -->
        <navigation-link url="https://www.baidu.com">
            <span class="fa fa-user">哈哈，</span>
            百度一下
        </navigation-link>
        <br>

        <!-- 插槽内也可包含组件 -->
        <navigation-link url="https://www.baidu.com">
            <navigation-link url="https://www.google.com">
                谷歌一下
            </navigation-link>
            百度一下
        </navigation-link>

        <!-- 若组件为包含一个slot元素，则该组件起始标签和结束标签之间的内容将会抛弃 -->
        <br/>
        <!-- 编译作用域 -->
        <navigation-link url="https://www.baidu.com">
            {{ url }}
            <!-- 这里的url值是data选项中的值而不是链接，因为该连接是传递给组件的，
            而不是在组件内部定义的 -->
        </navigation-link>
        <br/>

        <!-- 后备默认内容 -->
        <submit-button></submit-button>
        <submit-button>更改提交</submit-button>
    </div>

    <script>
        Vue.component("navigation-link", {
            props: ["url"],
            template: `
                <a
                    v-bind:href="url"
                    class="nav-link"
                >
                    <slot></slot>
                </a>
            `
        });
        Vue.component("submit-button", {
            template: `
                <button type="submit">
                    <slot>提交</slot>
                </button>
            `
        })
        var app = new Vue({
            el: "#app",
            data: {
                url: "传进来的值"
            }
        })
    </script>
</body>
</html>